@import (reference) "config";
@import (reference) "icons";

.import-accounts {
  min-height: 322px;
  padding-top: 20px;

  .icon-close {
    position: absolute;
    right: -10px;
    top: -50px;
  }
}

.import-modal {
  position: relative;

  &__icon {
      width: 60px;
      height: 60px;
      display: block;
      margin: 0 auto 30px auto;
      background-position: center;
      background-repeat: no-repeat;
      background-size: 100% auto;
      flex-shrink: 0;

    &-error {
      width: 80px;
      height: 80px;
      display: block;
      margin: 40px auto 30px auto;
    }
  }

  &__blocks-wrapper {
    display: flex;
    justify-content: center;
    align-items: inherit;
    flex-wrap: wrap;
    justify-content: center;

    w-button {
      width: 100%;
    }
  }

  &__select {
    height: auto;
    max-height: 242px;
    border-radius: @border-radius;
    list-style-type: none;
    border: 1px solid @color-basic-100;
    padding: 0;
    margin: 40px 0;
    overflow: auto;

    li {
      height: 48px;
      cursor: pointer;
      display: flex;
      padding: 8px 55px 8px 15px;
      white-space: nowrap;
      position: relative;

      .name {
        font-size: 15px;
        line-height: 1em;
        margin: 0 0 4px 0;
      }

      .has-name {
        display: flex;
        flex-direction: column;
      }

      .address {
        line-height: 1em;
      }

      &:hover {
        background: @color-basic-50;
      }

      w-checkbox-submit {
        position: absolute;
        right: 30px;
        top: 50%;
        transform: translate(0, -50%);
      }
    }
  }

  &__block {
    padding: 12px;
    margin: 30px 50px 20px;
    box-shadow: 0 1px 4px 0 rgba(58, 78, 136, 0.1);
    border-radius: @border-radius;
    background: @color-white;
    cursor: pointer;
    transition: .3s;

    &:hover {
      transform: translate3d(0,-3px,0);
      box-shadow: @shadow-main-hover;
    }

    w-button {
      & > * {
        height: 36px;
        border-radius: @border-radius / 2;
      }
    }
  }

  w-help-icon {
    text-align: left;

    .help-icon__content {
      right: -15px;
      left: auto;
    }
  }

  h3 {
    margin-top: 40px;
  }
}

@media screen and (max-width: 480px) {
  .import-modal__block {
    margin: 20px 0;
  }
}
